<template>
  <div>
    <BaseQuery>
      <BaseQueryLeft :span="2">
        <el-button
          icon="el-icon-plus"
          :size="formSize"
          type="primary"
          @click="add"
        >
          新增员工
        </el-button>
      </BaseQueryLeft>
      <BaseQueryRight :span="22">
        <el-form :model="form" :inline="true" :size="formSize">
          <el-form-item label="门店:">
            <el-select v-model="form.shopId" clearable placeholder="请选择门店">
              <el-option
                v-for="item in allShopList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="团队:">
            <el-select v-model="form.teamId" clearable placeholder="请选择团队">
              <el-option
                v-for="item in allTeamList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input
              v-model="form.name"
              clearable
              placeholder="请输入查询的姓名"
            />
          </el-form-item>
          <el-form-item label="电话:">
            <el-input
              v-model="form.phone"
              clearable
              placeholder="请输入查询的电话"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </BaseQueryRight>
    </BaseQuery>

    <div class="d-flex justify-flex-end mb-2">
      <el-button-group>
        <el-button type="primary" :size="formSize" @click="updateStatus(0)"
          >关闭休息模式</el-button
        >
        <el-button type="primary" :size="formSize" @click="updateStatus(1)"
          >开启休息模式</el-button
        >
        <el-button
          type="primary"
          :size="formSize"
          @click="updateEmployeeAction({ login: 0 })"
          >禁止登陆</el-button
        >
        <el-button
          type="primary"
          :size="formSize"
          @click="updateEmployeeAction({ login: 1 })"
          >允许登陆</el-button
        >
        <el-button
          type="primary"
          :size="formSize"
          @click="updateEmployeeAction({ receive: 0 })"
          >禁止分配新客户</el-button
        >
        <el-button
          type="primary"
          :size="formSize"
          @click="updateEmployeeAction({ receive: 1 })"
          >允许分配新客户</el-button
        >
      </el-button-group>
    </div>
  </div>
</template>

<script>
import { getAllShopList } from "@/api/shop/index";
import { getAllTeamList } from "@/api/team/index";
export default {
  name: "QueryForm",
  props: {
    value: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: {},
      allShopList: [],
      allTeamList: [],
      formSize: "small",
    };
  },
  watch: {
    value: {
      handler(val) {
        this.form = val;
      },
      deep: true,
      immediate: true,
    },
    form: {
      handler(val) {
        this.$emit("input", val);
      },
      deep: true,
    },
    "form.shopId": {
      handler(val) {
        this.form.teamId = "";
        this.getAllTeamList(val);
      },
      deep: true,
    },
  },
  created() {
    this.getAllShopList();
  },
  methods: {
    search() {
      this.$parent.page.page = 1;
      this.$emit("search");
    },
    add() {
      //this.$router.push({ name: "StaffCreate", params: { type: "add" } });
      this.$emit("add");
    },
    async getAllShopList() {
      const res = await getAllShopList();
      if (!res.result) return;
      this.allShopList = res.data.map((item) => {
        return {
          value: item.id,
          label: item.name,
        };
      });
    },
    async getAllTeamList(shopId) {
      const res = await getAllTeamList({ shop_id: shopId });
      if (!res.result) return;
      this.allTeamList = res.data.map((item) => {
        return {
          value: item.id,
          label: item.name,
        };
      });
    },
    updateEmployeeAction(val) {
      this.$emit("update", val);
    },

    // 开启关闭员工休息状态
    updateStatus(status) {
      this.$emit("update-status", status);
    },
  },
};
</script>
